<template>
  <div class="user-management-container">
    <el-row :gutter="20">
      <el-col :span="4" :xs="24">
        <el-tree
          :data="deptTree"
          :props="defaultProps"
          node-key="id"
          :expand-on-click-node="false"
          default-expand-all
          ref="tree"
          highlight-current
          @node-click="handleNodeClick">
        </el-tree>
      </el-col>
      <el-col :span="20" :xs="24">
        <vab-query-form>
          <vab-query-form-left-panel :span="12">
            <el-button
              icon="el-icon-plus"
              type="primary"
              @click="handleEdit($event)"
            >
              添加
            </el-button>
          </vab-query-form-left-panel>
          <vab-query-form-right-panel :span="12">
            <el-form :inline="true" :model="queryForm"  @submit.native.prevent>
              <el-form-item>
                <el-input
                  v-model="queryForm.username"
                  clearable
                  placeholder="请输入用户名"
                />
              </el-form-item>
              <el-form-item>
                <el-button icon="el-icon-search" type="primary" @click="queryData">
                  查询
                </el-button>
              </el-form-item>
            </el-form>
          </vab-query-form-right-panel>
        </vab-query-form>

        <el-table
          v-loading="listLoading"
          border
          :data="list"
        >
          <el-table-column
            align="center"
            label="用户名"
            prop="username"
            show-overflow-tooltip
          />
          <el-table-column
            align="center"
            label="联系电话"
            prop="phone"
            show-overflow-tooltip
          />
          <el-table-column
            align="center"
            label="联系人"
            prop="contact"
            show-overflow-tooltip
          />
          <el-table-column
            align="center"
            label="角色"
            prop="systemRole.roleName"
            show-overflow-tooltip
          />
          <el-table-column
            align="center"
            label="部门"
            prop="systemDept.deptName"
            show-overflow-tooltip
          />

          <!--      <el-table-column align="center" label="角色" show-overflow-tooltip>
                  <template #default="{ row }">
                    <el-tag v-for="(item, index) in row.roles" :key="index">
                      {{ item }}
                    </el-tag>
                  </template>
                </el-table-column>-->

          <el-table-column
            align="center"
            label="创键时间"
            prop="createTime"
            show-overflow-tooltip
          />
          <el-table-column
            align="center"
            label="操作"
            show-overflow-tooltip
            width="85"
          >
            <template #default="{ row }">
              <el-button type="text" @click="handleEdit(row)">编辑</el-button>
              <el-button type="text" @click="handleDelete(row)">删除</el-button>
            </template>
          </el-table-column>
          <template #empty>
            <el-image
              class="vab-data-empty"
              :src="require('@/assets/empty_images/data_empty.png')"
            />
          </template>
        </el-table>
        <el-pagination
          background
          :current-page="pageNo"
          :layout="layout"
          :page-size="pageSize"
          :total="total"
          @current-change="handleCurrentChange"
          @size-change="handleSizeChange"
        />
        <edit ref="edit" @fetch-data="fetchData" />
      </el-col>
      </el-row>
  </div>
</template>

<script>
import { doDelete, getList } from '@/api/userManagement'
import { getdeptTree} from '@/api/departmentManagement'
import Edit from './components/UserManagementEdit'

export default {
  name: 'UserManagement',
  components: { Edit },
  data() {
    return {
      deptTree:[],
      list: [],
      listLoading: true,
      layout: 'total, sizes, prev, pager, next, jumper',
      total: 0,
      pageNo: 1,
      pageSize: 10,
      queryForm:{
        username:undefined,
        deptId:undefined,
      },
      defaultProps: {
        children: "children",
        label: "label"
      },
    }
  },
  created() {
    this.deptTree = []
    this.fetchData()
    this.fetchDeptTree()
  },
  methods: {
    handleEdit(row) {
      console.log("row")
      console.log("row")
      console.log(row)
      if (row.id) {
        this.$refs['edit'].showEdit(row)
      } else {
        this.$refs['edit'].showEdit()
      }
    },
    handleDelete(row) {
      if (row.id) {
        this.$baseConfirm('你确定要删除当前项吗', null, async () => {
          const { message } = await doDelete(row.id )
          this.$baseMessage(message, 'success', 'vab-hey-message-success')
          await this.fetchData()
        })
      }
    },
    handleSizeChange(val) {
      this.pageSize = val
      this.fetchData()
    },
    handleCurrentChange(val) {
      this.pageNo = val
      this.fetchData()
    },
    queryData() {
      this.pageNo = 1
      this.fetchData()
    },
    // TODO  当前部门没有数据 抖动
    handleNodeClick(itme){
      this.queryForm.deptId = itme.id
      this.fetchData()
    },
    async fetchDeptTree(){
      const{ data } = await getdeptTree();
      this.deptTree = data
    },
    async fetchData() {
      if(this.queryForm.deptId === 1){
        this.queryForm.deptId = undefined
      }
      this.listLoading = true
      const {
        data: { list, total },
      } = await getList(this.pageNo,this.pageSize,this.queryForm)
      this.list = list
      this.total = total
      this.listLoading = false
    },
  },
}
</script>
